<template>
  <div class="header-Container">
    <div class="header-left flex-box">
      <el-icon
        class="icon"
        size="20"
        @click="MenuStore.callapseMenu(item, index)"  
        ><Fold
      /></el-icon>
      <ul class="flex-box">
        <li
          v-for="(item, index) in MenuSelect"
          :key="index"
          class="tap flex-box"
          :class="{ selected: route.path === item.path }"
        >
          <el-icon size="12"><component :is="item.icon"></component></el-icon>
          <RouterLink :to="item.path" class="text flex-box">
            {{ item.name }}
          </RouterLink>
          <el-icon size="12" class="close" @click="closeTab(item,index)"><Close /></el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right">
      <el-dropdown @command="handleClick">
        <div class="el-dropdown-link flex-box">
          <el-avatar
            :src="userInfo.avatar"
          />
          <p class="username">{{ userInfo.name }}</p>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="cancel">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import useMenuStore from "@/stores/Menu";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const userInfo=JSON.parse(localStorage.getItem("pz_userInfo"))
const router = useRouter();
const MenuStore = useMenuStore();
const MenuSelect = computed(() => MenuStore.selectMenu);
const route = useRoute();
console.log(route.path);

const closeTab = (item, index) => {
  MenuStore.closeMenu(item);
  // 非当前页
  if (route.path !== item.path) {
    return;
  }
  const selectedMenuData = MenuSelect.value;
  // 删除的最后一项
  if (index == selectedMenuData.length) {
    // 如果tab只有一个元素
    if (!selectedMenuData.length) {
      router.push("/");
    } else {
      router.push({
        path: selectedMenuData[index - 1].path,
      });
    }
  } else {
    router.push({
      path: selectedMenuData[index].path,
    });
  }
};
const handleClick=(command)=>{
if(command==="cancel"){
  localStorage.removeItem("pz_token")
  localStorage.removeItem("pz_userInfo")
  router.push("/login")
}
}
</script>

<style scoped lang="scss">
.flex-box {
  display: flex;
  align-items: center;
  height: 100%;
}
.header-Container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 100%;
  padding-right: 25px;
  width: 100%;
  .header-left {
    height: 100%;
    .icon {
      width: 45px;
      height: 100%;
    }
    .icon:hover {
      background-color: #f5f5f5;
      cursor: pointer;
    }
    .tap {
      padding: 0 10px;
      height: 100%;
      .text {
        margin: 0 5px;
      }
      .close {
        visibility: hidden;
      }
      &.selected {
        a {
          color: #4093ff;
        }
        i {
          color: #4093ff;
        }
        background-color: #f5f5f5;
      }
    }
    .tap:hover {
      background-color: #f5f5f5;
      .close {
        visibility: visible;
        cursor: pointer;
        color: #000;
      }
    }
  }
  .header-right {
    .username {
      margin-left: 10px;
    }
  }
  a {
    height: 100%;
    color: #333;
    font-size: 15px;
  }
}
</style>
